<template>
	<view class="notice-container">
		<scroll-view class="notice-inner" :style="{height: scrollH + 'px'}" scroll-y="true">
			<view class="title-box">
				<!-- <image class="logo" src="../../../static/imgs/logo-plain.png" mode=""></image> -->
				<!-- <image class="logo" src="./logo-plain.png" mode=""></image> -->
				<view class="notice-bold-title">课程预约、取消、扣卡规则变动公告</view>
			</view>
			<view class="summary-box">
				<view>各位亲爱的A.T会员，</view>
				<view class="summary-content">自2022年5月1日起，我馆将实施新的课程预约、取消及扣卡规则，敬请各位会员了解。如有疑问，可随时联系我们详询。感谢各位会员长期大力支持！
				</view>
			</view>
			<view class="notice-title">A.T课程预约、取消、扣卡新规则</view>
			<view class="notice-content">
				【课程预约】团课/小班课请在约课小程序自助预约，预约截止时间为开课前5分钟；私教课请在A.T私教群里与老师预约；团课/小班课程开课前一天21点前，如无人预约将取消开课；</view>
			<view class="notice-content">【课程取消】会员预约课程后无法如约上课，最晚请在开课前1小时自动取消预约；</view>
			<view class="notice-content">【课程扣卡】团课/小班课开课前30分钟系统自动进行课程签到，此时尚未取消的已预约课程，将被系统默认自动签到，按照到课扣卡。</view>
			<view>
				<text class="notice-tips">温馨提示：</text>为了确保系统切换运行正常，5月第一周课表小程序上线时间为5月1日09：00，上线即可预约。
			</view>
			<view class="notice-date">2022年4月29日</view>
			<view class="switch-box">
				<switch style="transform:scale(0.7)" @change="switchChange"/>
				<view class="switch-title">我已阅读并知晓，以后不再弹出</view>
			</view>
			<view class="cancel-button-view" @click="closeNotice">
				<uni-icons type="close" color="#fff"></uni-icons>
				<view class="reserve-button-text">关闭通知</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			scrollH: Number
		},
		methods: {
			closeNotice(){
				this.$emit('closeNotice')
			},
			switchChange(e){
				this.$emit('switchChange',e)
			}
		}
	}
</script>

<style>
	.notice-container {
		width: 700rpx;
		margin: 60rpx auto;
		background-color: #fff6f7;
	}

	.notice-inner {
		width: 680rpx;
		padding: 60rpx 20rpx;
	}

	.title-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		line-height: 100rpx;
	}

	.logo {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.notice-bold-title {
		color: #bd372b;
		font-size: 32rpx;
		font-weight: 600;
	}

	.summary-box {
		font-size: 30rpx;
		font-weight: 400;
		line-height: 50rpx;
		color: #333;
	}

	.summary-content {
		text-indent: 2em;
	}

	.notice-title {
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		margin-top: 60rpx;
		margin-bottom: 40rpx;
	}

	.notice-content {
		line-height: 46rpx;
		font-size: 26rpx;
		margin-bottom: 40rpx;
	}

	.notice-tips {
		color: #333;
		font-weight: 500;
	}

	.notice-date {
		text-align: right;
	}

	.switch-box {
		display: flex;
		flex-direction: row;
		align-content: center;
		font-size: 26rpx;
		color: #999;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.switch-title {
		display: flex;
		flex-direction: row;
		align-content: center;
		height: 60rpx;
		line-height: 60rpx;
	}

	.cancel-button-view {
		background-color: #6EC2AE;
		padding: 8rpx 20rpx;
		border-radius: 28rpx;
		font-size: 26rpx;
		color: #fff;
		margin-right: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.reserve-button-text{
		margin-left: 20rpx;
	}
</style>
